import React from 'react'
import './index.scss'
export default function MyFooter({ list, changeAllStatus }) {
  // 已选中（goods_state 为 true）的数据（goods_count）
  const totalCount = list
    .filter((item) => item.goods_state)
    .reduce((acc, cur) => acc + cur.goods_count, 0)
  const totalPrice = list
    .filter((item) => item.goods_state)
    .reduce((acc, cur) => acc + cur.goods_count * cur.goods_price, 0)

  // 所有的单选都选中了，就选中全选
  const selectAllStatus = list.every((item) => item.goods_state)
  return (
    <div className='my-footer'>
      <div className='custom-control custom-checkbox'>
        {/* // !#2. 调用传递过来方法并传递实参 */}
        <input
          type='checkbox'
          className='custom-control-input'
          id='footerCheck'
          checked={selectAllStatus}
          onChange={() => changeAllStatus(!selectAllStatus)}
        />
        <label className='custom-control-label' htmlFor='footerCheck'>
          全选
        </label>
      </div>
      <div>
        <span>合计:</span>
        <span className='price'>¥ {totalPrice.toFixed(2)}</span>
      </div>
      <button type='button' className='footer-btn btn btn-primary'>
        结算 ({totalCount})
      </button>
    </div>
  )
}
